<template>
	<view class="materials-expend">
		<view class="title">材料消耗</view>
		
		<view class="table">
			<view class="table-header">
				<view style="flex: 1;">材料名称</view>
				<view style="width: 110px;">规格型号</view>
				<view style="width: 90px;">数量单位</view>
			</view>
			<view v-for="(item, index) in materialsExpendList" :key="index" class="table-body">
				<view style="flex: 1;">{{ item.parentTypeName }} - {{ item.deviceTypeName }}</view>
				<view style="width: 110px;">{{ item.specificationModel }}</view>
				<view style="width: 90px;">{{ item.num || 0 }}{{ item.unit }}</view>
			</view>
			<view v-if="!materialsExpendList.length" style="padding-bottom: 40px;">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import { getListByPmprIds } from "@/api/comprehensive/comprehensive.js"
	
	export default {
		inject: ['getId'],
		data() {
			return {
				// 材料消耗列表
				materialsExpendList: []
			}
		},
		methods: {
			/** 初始化 */
			init() {
				this.getMaterialsExpendList()
			},
			
			/** 获取材料消耗列表 */
			getMaterialsExpendList() {
				this.materialsExpendList = []
				if (!this.getId()) {
					return
				}
				return new Promise(resolve => {
					getListByPmprIds({
						pmId: this.getId(),
						reviewStatus: 'tg'
					}).then(res => {
						if (res && Array.isArray(res.result)) {
							const tempArray = []
							for (const item of res.result) {
								const index = tempArray.findIndex(item1 => item1.parentTypeName === item.parentTypeName && item1.deviceTypeName === item.deviceTypeName && item1.specificationModel === item.specificationModel)
								if (index !== -1) {
									tempArray[index].num += item.num
								} else {
									tempArray.push(item)
								}
							}
							this.materialsExpendList = tempArray.map(item => ({ ...item, num: Math.round(item.num * 100) / 100 }))
						}
						resolve()
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.materials-expend {
		background: #fff;
		padding-bottom: 10px;
		.title {
			padding: 24px 16px 15px;
			line-height: 28px;
			font-size: 20px;
			font-weight: bold;
			color: #22204e;
		}
		.table {
			font-weight: bold;
			font-size: 16px;
			text-align: center;
			padding: 0 16px;
			.table-header {
				background: #f5f7fa;
				color: #445469;
				display: flex;
				align-items: center;
				min-height: 50px;
				view {
					padding: 13px;
					box-sizing: border-box;
					flex-shrink: 0;
				}
			}
			.table-body {
				display: flex;
				align-items: center;
				color: #686f79;
				line-height: 26px;
				min-height: 50px;
				&:nth-of-type(odd) {
					background: #f5f7fa;
				}
				view {
					padding: 6px;
					flex-shrink: 0;
					box-sizing: border-box;
					&:nth-child(1) {
						text-align: left;
					}
				}
			}
		}
	}
</style>
